<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resume_MZY</title>
    <!-- font awesome cdn link  -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.2.1/css/all.css" rel="stylesheet">
    <!-- qq,wechat小图标加载不出来，因此加了一条这样的引入 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <!-- custom css file link  -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="icon" href="favicon.ico">
    <!-- 引入js -->
    <script src="./JS/index.js" defer></script>
</head>

<body>
    <div class="container">
        <!-- 个人名片区域 -->
        <aside class="aside">
            <div class="asideContainer">
                <img src="./images/photo.png" alt="">
                <h3>马哲严</h3>
                <p>中共党员</p>
                <ul class="socialAccounts">
                    <li class="github"><i class="fa fa-github"></i></li>
                    <li class="weibo"><i class="fa fa-weibo"></i></li>
                    <li class="wechat"><i class="fa fa-wechat"></i></li>
                    <li class="qq"><i class="fa fa-qq"></i></li>
                </ul>
                <button class="contactBtn">联系我</button>
            </div>
        </aside>

        <!-- 详细介绍区域 -->
        <main class="main">
            <!-- section1 个人介绍 -->
            <section class="section1">
                <h2>个人介绍</h2>
                <p>本科就读于东华理工大学地理信息科学专业，将于2023年6月份毕业；在校主修方向为GIS应用，目前在武汉新中地教育参加为期四个月的GIS开发特训营。</p>
                <p>本科主修课程涉及地图学、地理信息系统原理、空间数据库、空间分析、GIS程序设计、测量学、遥感、摄影测量等方面。</p>
                <p>硕士学习期间想研究的方向是智慧城市、高精地图以及三维GIS等。</p>
                <ul>
                    <li>年龄: <b>22</b></li>
                    <li>籍贯: <b>山西长治</b></li>
                    <li>学历: <b>大学本科</b></li>
                    <li>外语: <b>英语6级</b></li>
                    <li>报考学校: <b>武汉大学</b></li>
                    <li>报考专业: <b>测绘工程</b></li>
                    <li>Email: <b>mzy_200110@163.com</b></li>
                    <li>电话: <b>18870029030</b></li>
                </ul>


            </section>

            <!-- section2 技术栈 -->
            <section class="section2">
                <h2>技术栈</h2>
                <div class="technologyStack">
                    <div class="content">
                        <img src="./images/icon-1.png" alt="">
                        <p>HTML5</p>
                    </div>
                    <div class="content">
                        <img src="./images/icon-2.png" alt="">
                        <p>CSS3</p>
                    </div>
                    <div class="content">
                        <img src="./images/icon-3.png" alt="">
                        <p>JavaScript</p>
                    </div>
                    <div class="content">
                        <img src="./images/icon-4.png" alt="">
                        <p>SASS</p>
                    </div>
                    <div class="content">
                        <img src="./images/icon-5.png" alt="">
                        <p>JQuery</p>
                    </div>
                    <div class="content">
                        <img src="./images/icon-6.png" alt="">
                        <p>React.Js</p>
                    </div>

                </div>
            </section>

            <!-- section3 技能熟练度 -->
            <section class="section3">
                <h2>技能熟练度</h2>
                <ul>
                    <!-- HTML -->
                    <li class="html">
                        <div>
                            <b>Html</b>
                            <p>95%</p>
                        </div>
                        <div class="proportion">
                            <div class="p_progress"></div>
                        </div>
                    </li>

                    <!-- JQuery -->
                    <li class="JQuery">
                        <div>
                            <b>JQuery</b>
                            <span>90%</span>
                        </div>
                        <div class="proportion">
                            <div class="p_progress"></div>
                        </div>
                    </li>

                    <!-- CSS -->
                    <li class="CSS">
                        <div>
                            <b>CSS</b>
                            <span>80%</span>
                        </div>
                        <div class="proportion">
                            <div class="p_progress"></div>
                        </div>
                    </li>
                    <!-- React -->
                    <li class="React">
                        <div>
                            <b>React</b>
                            <span>75%</span>
                        </div>
                        <div class="proportion">
                            <div class="p_progress"></div>
                        </div>
                    </li>
                    <!-- JavaScript -->
                    <li class="JavaScript">
                        <div>
                            <b>JavaScript</b>
                            <span>65%</span>
                        </div>
                        <div class="proportion">
                            <div class="p_progress"></div>
                        </div>
                    </li>
                    <!-- vue -->
                    <li class="Vue">
                        <div>
                            <b>Vue</b>
                            <span>65%</span>
                        </div>
                        <div class="proportion">
                            <div class="p_progress"></div>
                        </div>
                    </li>
                    <!-- Photoshop -->
                    <li class="Photoshop">
                        <div>
                            <b>Photoshop</b>
                            <span>75%</span>
                        </div>
                        <div class="proportion">
                            <div class="p_progress"></div>
                        </div>
                    </li>
                    <!-- ArcMap -->
                    <li class="ArcMap">
                        <div>
                            <b>ArcMap</b>
                            <span>80%</span>
                        </div>
                        <div class="proportion">
                            <div class="p_progress"></div>
                        </div>
                    </li>

                </ul>
            </section>

            <!-- section4 实践经历 -->
            <section class="section4">
                <h2>实践经历</h2>
                <div class="experience1">
                    <h4>2023年2月——6月</h4>
                    <h3>新中地GIS开发特训营</h3>
                    <p>特训营期间学习HTML,CSS,JavaScript,vue等基础内容，推动开发基于WebGIS的智慧城市管理信息系统实战项目以及学习三维GIS开发，相信可以为我硕士研究生阶段的科研工作打下更为坚实的开发基础。
                    </p>
                </div>
                <div class="experience2">
                    <h4>2021年11月</h4>
                    <h3>第十届全国大学生GIS应用技能大赛</h3>
                    <p>比赛当天我们四个小组成员共同讨论解题思路，运用软件完成空间分析的操作，撰写文档，最终提交小组的任务解决方案。小组在本次比赛中取得了一等奖的好成绩，此次比赛不仅提升了我的专业技能，更加促进了我的团队合作精神。
                    </p>
                </div>
                <div class="experience3">
                    <h4>2020年10月——2021年6月</h4>
                    <h3>勃朗登山协会</h3>
                    <p>在此期间担任勃朗登山协会副会长，先后组织策划并参加了武功山徒步挑战赛、南昌梅岭徒步、环海南岛骑行、新年登高等活动。</p>
                </div>

            </section>

            <!-- section5 联系方式 -->
            <section class="section5">
                <h2>联系方式</h2>
                <ul class="contactContents">
                    <li class="adress">
                        <div class="icon"><i class="fa fa-map"></i></div>
                        <div class="text">
                            <h3>详细住址</h3>
                            <p>山西省长治市上党区</p>
                        </div>
                    </li>
                    <li class="phone">
                        <div class="icon"><i class="fa fa-phone"></i></div>
                        <div class="text">
                            <h3>手机号</h3>
                            <p>18870029030</p>
                        </div>
                    </li>
                    <li class="Email">
                        <div class="icon"><i class="fa fa-envelope"></i></div>
                        <div class="text">
                            <h3>Email</h3>
                            <p>mzy_200110@163.com</p>
                        </div>
                    </li>
                </ul>
            </section>
        </main>
    </div>
</body>

</html>